<template>
  <div>
    <div class="block1">
      <el-row>
        <el-col :span="24">
          <div class="grid-content bg-purple-dark" style="font-size: 36px; color: #ff3833">商品采购统计</div>
        </el-col>
      </el-row>
    </div>

    <div class="block2">
      <el-container>
        <el-main></el-main>
        <el-header>
          <div class="block">
            <span class="demonstration">日期:</span>
            <el-date-picker
              v-model="ruleForm.sTime"
              type="date"
              placeholder="选择日期"
              :picker-options="pickerOptions">
            </el-date-picker>
            <span class="demonstration">—</span>
            <el-date-picker
              v-model="ruleForm.eTime"
              align="right"
              type="date"
              placeholder="选择日期"
              :picker-options="pickerOptions">
            </el-date-picker>


            <el-form-item style="width: 200px" label-width="100px" label="商品类别" prop="goodsTypeId">
              <el-select v-model="ruleForm.goodsTypeId" multiple placeholder="请选择">
                <el-option
                  v-for="item in CategoryOptions"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>

            <span class="demonstration">商品编码:</span>
            <el-input
              style="width: 200px"
              size="large"
              v-model="ruleForm.code" placeholder="请输入商品编码"></el-input>

            <span class="demonstration">商品名称:</span>
            <el-input
              style="width: 200px"
              size="large"
              v-model="ruleForm.name" placeholder="请输入商品名称"></el-input>

            <el-button style="margin-left: 35px" icon="el-icon-search" @click="query()" circle>搜索</el-button>
          </div>
        </el-header>
      </el-container>
    </div>

    <div class="block3">
      <el-table
        max-height="700"
        v-loading="listLoading"
        :data="tableData"
        element-loading-text="Loading"
        border
        fit
        highlight-current-row>
        <el-table-column prop="purchaseNumber"  width="150" label="进货单号" align="center" ></el-table-column>
        <el-table-column prop="purchaseDate"  width="150" label="入库日期" align="center" ></el-table-column>
        <el-table-column prop="type"  width="150" label="入库商品类型" align="center" ></el-table-column>
        <el-table-column prop="supplier"  width="150" label="供应商" align="center" ></el-table-column>
        <el-table-column prop="code"  width="150" label="商品编号" align="center" ></el-table-column>
        <el-table-column prop="name"  width="150" label="商品名称" align="center" ></el-table-column>
        <el-table-column prop="model"  width="150" label="商品型号" align="center" ></el-table-column>
        <el-table-column prop="goodsType"  width="150" label="商品类别" align="center" ></el-table-column>
        <el-table-column prop="unit"  width="150" label="单位" align="center" ></el-table-column>
        <el-table-column prop="price"  width="150" label="单价" align="center" ></el-table-column>
        <el-table-column prop="num"  width="150" label="数量" align="center" ></el-table-column>
        <el-table-column prop="total"  width="150" label="总金额" align="center" ></el-table-column>
        <el-table-column prop="goodsId"  width="150" label="商品id" align="center" ></el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
// import {getList} from '@/api/table'
export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'gray',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },

  data() {
    return {
      //日期选择器
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [{
          text: '今天',
          onClick(picker) {
            picker.$emit('pick', new Date());
          }
        }, {
          text: '昨天',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24);
            picker.$emit('pick', date);
          }
        }, {
          text: '一周前',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', date);
          }
        }]
      },
      //商品类别选择器
      CategoryOptions:[],
      ruleForm: {
        sTime:'',
        eTime:'',
        goodsTypeId:'',
        code: '',
        name:'',

      },
      input: '',
      tableData: [],
      listLoading: false
    };
  },
  methods: {
    query() {
      let formData = this.qs.stringify(this.ruleForm);
      let url = 'http://localhost:8887/purchaseListGoods/count';
      this.axios.create({'headers': {'Authorization': localStorage.getItem("jwt")}})
        .post(url, formData).then((response) => {
        console.log(this.ruleForm);
        let responseBody = response.data;
        this.tableData = responseBody.data;

      })
    },
    loadCategory(){
      let url = 'http://localhost:8887/goodsType/loadGoodsType';
      this.axios
        .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
        .get(url).then((response) => {
        let responseBody = response.data;
        console.log(response.data)

      });

    }
  },
  mounted(){
    this.query();
    //this.loadCategory();
  }
};
</script>

<style>
.block1 {
  border-radius: 2px
}
.block2 {

}
.block3 {
  margin: 30px 30px 30px 30px;
}
.demonstration {
  font-size: 20px;
  margin: 0px 10px 0px 10px;
}
el-row {
  margin-bottom: 20px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
</style>
